<template>
  <div class="integralGoods-wrap">
    <div class="goods" v-for="(item,index) in goods" :key="index" @click="getDetail(item)">
      <div class="avatar">
      <img style="height: 100%;width: 100%;border-radius: 4px;" :src="item.avatar" >
    </div>
    <div class="goods-info">
      <span style="font-size: 14px;font-weight: 700">{{ item.title }}</span>
    <p style="font-size: 12px;color: rgb(246, 146, 36);margin: 0">{{ item.price }}积分</p>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntegralGoods',
  props:{
    goods: Array
  },
  data(){
    return {

    }
  },
  methods:{
    getDetail(e){
      this.$emit('getDetail',e)
    }
  }
}
</script>
<style scoped>
.integralGoods-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.goods {
  width: auto;
}
.goods .avatar img {
  border-radius: 4px;
}

@media screen and (max-width: 321px){
    .goods .avatar {
        transition: all .3s;
        width: 150px!important;
        height: 150px!important;
        border-radius: 4px;
        margin: 0 auto;
    }
    .goods-info {
        transition: all .3s;
        padding: 0!important;
    }
}

@media screen and (min-width: 322px) and (max-width: 380px){
  .goods .avatar {
        transition: all .3s;
        width: 170px!important;
        height: 170px!important;
        border-radius: 4px;
        margin: 0 auto;
    }
    .goods-info {
        transition: all .3s;
        padding: 2px 4px!important;
    }
}

@media screen and (min-width: 381px) and (max-width: 450px){
    .goods .avatar {
        transition: all .3s;
        width: 175px!important;
        height: 175px!important;
        
        margin: 0 auto;
    }
    .goods-info {
      padding: 2px 0!important;
    }
    
}
</style>
